import * as API from "@/services";
import {modifyCurrentUser} from "@/services/system/user/UserService";
import {useModel, useRequest} from "@umijs/max";
import {Button, Form, message, Spin} from "antd";
import {KfInput, KfTextArea} from "kf-web-library";
import React, {useState} from 'react';

interface BaseVidwProps {
}

type ModifyEntity = API.User_Modify;
const BaseView: React.FC<BaseVidwProps> = (props) => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const {initialState, setInitialState} = useModel('@@initialState');

  const dataReq = useRequest(() => initialState!.fetchUserInfo!(), {
    formatResult: (resp) => {
      return resp;
    },
    onSuccess: (data, params) => {
      form.setFieldsValue({
        nickname: data.nickname,
        phone: data.phone,
        officeLocation: data.officeLocation,
      });
      setInitialState({
        ...initialState,
        currentUserInfo: data
      })
    }
  });


  return (
    <Spin spinning={dataReq.loading} tip="正在加载数据,请稍候..." delay={500}>
      <Form
        labelCol={{span: 24}}
        wrapperCol={{span: 24}}
        form={form}
        layout={'vertical'}
        name="login-form"
        autoComplete="off"
        onFinish={async (values) => {
          setLoading(true);
          modifyCurrentUser(values).then(resp => {
            if (resp.flag) {
              message.success("修改成功");
              dataReq.refresh();
            }
          }).finally(() => {
            setLoading(false);
          })
        }}
      >

        <Form.Item label="昵称" name={nameof<ModifyEntity>((x) => x.nickname)} rules={[{required: true}]}>
          <KfInput/>
        </Form.Item>

        <Form.Item label="联系电话" name={nameof<ModifyEntity>((x) => x.phone)} rules={[{required: false}]}>
          <KfInput/>
        </Form.Item>

        <Form.Item label="办公地点" name={nameof<ModifyEntity>((x) => x.officeLocation)} rules={[{required: false}]}>
          <KfTextArea/>
        </Form.Item>

        <Form.Item>
          <Button className={'login-submit-btn'} type="primary" htmlType="submit" loading={loading}>
            确定
          </Button>
        </Form.Item>
      </Form>
    </Spin>
  );
};

export default BaseView;
